<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>他人主页</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <link rel="stylesheet" href="./css/grzu.css">
</head>

<body>

    <!-- 上方用户信息菜单区域 -->

    <div class="p-2 menus">
        <div class="m-2 jg fs">
            <!-- 排版用,无内容 -->
            <div></div>
            <!-- src用户头像加载前展示图片 -->
            <div class="">
                <img id="imgLogo1" src="./img/e.jpg" alt="">
            </div>
            <!-- 返回首页 -->
            <div>
                <span id="sy" class="sb">首页</span>

            </div>

        </div>

        <!-- 搜索框 -->
        <div class="m-2 jg2 main">
            <div class="btn-group">
                <input type="text" class="form-control" placeholder="想了解什么呢" size="20">
                <button type="text" class="input-group-text">搜索</button>
            </div>
        </div>

        <!-- 上方右边展示 -->
        <div class="m-2 jg fs">
            <!-- 未登录展示图片为登录.登录则展示个人头像,将title值清空 -->
            <div class="dx">
                <img id="imgLogo2" src="https://ts1.cn.mm.bing.net/th/id/R-C.dda388ff0021b84efe272b7bf984a6e9?rik=wSzOcqcO2nMl4g&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f39%2f44%2f65573cbf06762ec.jpg&ehk=Gwz8O8JmkfUyWN9YOHVQQzpUOG68ljDAWS5jmQ4yNJA%3d&risl=&pid=ImgRaw&r=0" alt="" title="请登录">
            </div>


        </div>

    </div>

    <!-- 内容 -->
    <div class="dys">
        <div class="">
            <img class="tp" src="./img/a.webp" alt="">
        </div>
        <div class="p-2 menu">
            <div class="zjnr">
                <img id="imgLogo" class="nrtp" src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">

                <!-- 主页账号名称 -->

                <span id="zhh" class="zymc">zzz</span>
                <div class="dropdown">

                </div>

            </div>

            <div>
                <span class="m-2 sb bk" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#gzDialog">关注</span>
                <span class="m-2 sb bk" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#tjhyDialog">添加好友</span>
            </div>




        </div>

        <div id="datas" class="s">
            <div class="p-2 pl">
                <div class="pll">
                    <span class="m-2 sb">评论</span>
                </div>
                <div class="zjnr">
                    <img class="m-4" id="imgLogo4" src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">
                    <div id="zh01"></div>
                    <span class="zhh"></span>
                </div>
                <!-- 评论 -->
                <div class="pll1 sb">
                    <span id="pl01">评论
                    </span>
                </div>
                <div class="pl1">
                    <span id="dz01" class="m-2">点赞</span>
                    <span id="dj01" class="m-2">点击率</span>
                </div>
            </div>
        </div>
    </div>




    <!-- 添加对话框 -->
    <div id="tjhyDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加好友</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="m-2">
                        <input type="text" id="drm" placeholder="登入名" class="form-control">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnadd" class="btn btn-success">
                        添加好友
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- 关注对话框 -->
    <div id="gzDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">关注</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="m-2">
                        <input type="text" id="drm1" placeholder="登入名" class="form-control">
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btngz" class="btn btn-success">
                        关注
                    </button>

                </div>
            </div>
        </div>
    </div>




    <!-- 公用消息轻提示 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">服务器消息</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    <!-- 公用消息轻提示结束 -->


    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <script src="./js/grzu.js" type="module"></script>

</body>

</html>